<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>用户找回密码页面</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="images/bee.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <!-- <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> -->

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
  <!-- <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> -->

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body style="background: url(images/bg1.png) no-repeat;background-size: cover; background-attachment:fixed;">
  
  <!--在这里编写你的代码-->
  <!-- 页头 -->
  <header data-am-widget="header"
  class="am-header am-header-default" style="background-color: #F6B541;">
  <div class="am-header-left am-header-nav">
  <!-- <a href="#left-link">
      <span class="am-header-nav-title">
        首页
      </span>
  
        <i class="am-header-icon am-icon-home"></i>
  </a> -->
  <ul>
    <a href="ufpage.html">
      <li style="display: flex;flex-direction: row;width: 200px;">
          <img src="images/shouye.png" alt="管理员联系方式" style="width: 150px; height: 22px;margin-top: 10px; margin-left: -10%;">
          <!-- <p style="color: #000; margin-top: 0;font-size: 16px;">小蜜蜂图片收集网</p> -->
      </li>
    </a>
  </ul>
</div>



<div class="am-header-right am-header-nav">
<!-- <a href="#right-link">
    <span class="am-header-nav-title">
      菜单
    </span>
      <i class="am-header-icon am-icon-bars"></i>
</a> -->
<!-- <button style="color: black;">登录</button> -->
<ul>
  <li style="display: flex;flex-direction: row;">
    <button type="button" class="am-btn am-btn-danger am-round" style="background-color: #E87B17;width: 80px;outline: 0;" onclick="login()">登录</button>&nbsp;&nbsp;
    <button type="button" class="am-btn am-btn-danger am-round" style="background-color: #fff;width: 80px; color: #000;outline: 0;"onclick="register()">注册</button>
  </li>
</ul>
</div>
</header>

  <div class="am-container" style="background-color: rgba(241, 246, 249, 0.65); margin-top: 60px; margin-bottom: 60px; 
  box-shadow: 5px 5px 5px rgba(0,0,0,0.1); border-radius: 5px; width: 650px;">
  <div class="am-g am-g-fixed" style="margin-top: 4vh;">
    <div class="am-u-sm-5 am-u-sm-offset-1" style="height: 40px; font-size:xx-large;">
      <span style="color: #E87B17; font-weight: 700;">找回密码</span>
    </div>
  </div>
  <br>
  <br>
  <div class="am-g">
    <div class="am-u-sm-5 am-u-sm-offset-1" style="color: #E87B17; font-family: SimHei; font-weight: 700; font-size:large;">No.1 验证手机号</div>
  </div>
  <br>
  <div class="am-g" style="margin-bottom: 3vh;">
    <div class="am-u-sm-3 am-u-sm-offset-1" style="height: 30px; font-size:large; font-family: SimHei; font-weight: 700;">手机号码：</div>
  <div class="am-u-sm-8" style="height: 30px; font-size:x-large;" >
    <input type="text" class="" id="shouji" placeholder="请输入手机号码" style="border-radius: 10px;width: 300px;height: 36px; font-size: small;" onblur="checkusername()">
    <br><span id="usernamemsg" style="font-size: 12px;" >&nbsp;</span>
  </div>
  </div>
  <br>
  <div class="am-g">
    <div class="am-u-sm-3 am-u-sm-offset-1" style="height: 30px; font-size:large; font-family: SimHei; font-weight: 700;">验证码：</div>
  <div class="am-u-sm-8" style="height: 30px; font-size:x-large;">
    <input type="text" class="" id="yanzhengma" placeholder="请输入验证码" style="border-radius: 10px; width: 160px;height: 36px; font-size: small;" onblur="checkver()">
    <button type="button" id="vcodeBtn" class="am-btn am-btn-danger am-round" style="background-color: #fff; color: black; border-color: #ADABAA; width: 140px;outline: 0;">获取短信验证码</button>
    <br><span id="vermsg" style="font-size: 12px;" >&nbsp;</span>
  </div>
  </div>
  <!-- <div class="am-u-sm-3" style="height: 30px; font-size:small;" >
    <button type="button" class="am-btn am-btn-danger am-round" style="background-color: #fff; color: black; border-color: #ADABAA; width: 120px;">获取验证码</button>
  </div> -->
  <br>
  <hr>
  <br>
  <div class="am-g">
    <div class="am-u-sm-5 am-u-sm-offset-1" style="color: #E87B17; font-family: SimHei; font-weight: 700; font-size:large;">No.2 重置密码</div>
  </div>
  <br>
  <div class="am-g" style="margin-bottom: 3vh;">
    <div class="am-u-sm-3 am-u-sm-offset-1" style="height: 30px; font-size:large; font-family: SimHei; font-weight: 700;">新密码：</div>
  <div class="am-u-sm-8" style="height: 30px; font-size:x-large;">
    <input type="password" class="" id="shezhipsw" placeholder="请输入新密码" style="border-radius: 10px; width: 300px;height: 36px; font-size: small;" onblur="recheckpsw()">
    <br><span id="re_password1msg" style="font-size: 12px;" >&nbsp;</span>
  </div>
  </div>
  <br>
  <div class="am-g">
    <div class="am-u-sm-12 am-u-sm-offset-4" style="font-size: x-small; color: #FC7C4C;">由字母、数字或符号至少两种以上字符组成的6-20位半角字符，区分大小写</div> 
  </div>
  <br>
  <div class="am-g" >
    <div class="am-u-sm-3 am-u-sm-offset-1" style="height: 30px; font-size:large; font-family: SimHei; font-weight: 700;">确认密码：</div>
  <div class="am-u-sm-8" style="height: 30px; font-size:x-large;">
    <input type="password" class="" id="querenpsw" placeholder="请再次输入密码" style="border-radius: 10px; width: 300px;height: 36px; font-size: small;" onblur="recheckpsw()">
    <br><span id="re_password2msg" style="font-size: 12px;" >&nbsp;</span>

  </div>
  </div>
  <br>
  <br>

  <div class="am-g" style="text-align: center;">
    <div class="am-u-sm-8 am-u-sm-offset-4 am-u-sm-centered" style="height: 20px; font-size:large;">
        <button type="button" id="repasswordBtn" class="am-btn am-btn-danger am-round" style="background-color: #E87B17; width: 300px;outline: 0;">重置密码</button>
      </div>
  </div>

  <!-- <div class="am-g">
    <div class="am-u-sm-8 am-u-sm-offset-4" style="height: 20px; font-size:large;">
      <button type="button" class="am-btn am-btn-danger am-round" style="background-color: #E87B17; width: 300px; margin-left: 5vw;">重置密码</button>
    </div>
  </div> -->
  <br>
  <br>
  <br>
</div>


<!-- 页脚 -->
<footer data-am-widget="footer"
class="am-footer am-footer-default"
 data-am-footer="{  }" style="background-color: rgba(255,255,255,0) ;">
<div class="am-footer-switch">
<span class="am-footer-ysp" data-rel="mobile"
data-am-modal="{target: '#am-switch-mode'}">
云适配版
</span>
<span class="am-footer-divider"> | </span>
<a id="godesktop" data-rel="desktop" class="am-footer-desktop" href="javascript:">
电脑版
</a>
</div>
<div class="am-footer-miscs ">

<p>由 <a href="http://www.yunshipei.com/" title="诺亚方舟"
                                      target="_blank">诺亚方舟</a>
  提供技术支持</p>
<p>CopyRight©2014  AllMobilize Inc.</p>
<p>京ICP备13033158</p>
<br>
<p>NaN团队--小蜜蜂图片收集网</p>
</div>
</footer>

<div id="am-footer-modal"
class="am-modal am-modal-no-btn am-switch-mode-m am-switch-mode-m-default">
<div class="am-modal-dialog">
<div class="am-modal-hd am-modal-footer-hd">
<a href="javascript:void(0)" data-dismiss="modal" class="am-close am-close-spin " data-am-modal-close>&times;</a>
</div>
<div class="am-modal-bd">
您正在浏览的是

<span class="am-switch-mode-owner">
  云适配
</span>

<span class="am-switch-mode-slogan">
    为您当前手机订制的移动网站。
</span>
</div>
</div>
</div>



<!--[if (gte IE 9)|!(IE)]><!-->
<!-- <script src="assets/js/jquery.min.js"></script> -->
<!--<![endif]-->
<!--[if lte IE 8 ]-->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<!--[endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
  function checkusername(){
        var username= document.getElementById('shouji');
        var usernamemsg= document.getElementById('usernamemsg');
        var reg1 =/^1[34578]\d{9}$/;
        if(username.value.length==0){
            usernamemsg.innerHTML = "手机号码不得为空";
            usernamemsg.style.color='red';
        return false;
        }else if(!reg1.test(username.value)){
            usernamemsg.innerHTML = "请输入正确的手机号码";
            usernamemsg.style.color='red';
        return false;
         } else {
            usernamemsg.innerHTML = "手机号码格式符合要求";
            usernamemsg.style.color='green';
         return true;
        }
      }

      function recheckpsw(){
    var password1= document.getElementById('shezhipsw');
   var passwordmsg1= document.getElementById('re_password1msg');
   var password2= document.getElementById('querenpsw');
   var passwordmsg2= document.getElementById('re_password2msg');
    var reg =/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;  //6-20位，包含大小写和数字
    if(password1.value.length==0){
        passwordmsg1.innerHTML = "密码不得为空";
       passwordmsg1.style.color='red';
    return false;
    }else if(!reg.test(password1.value)){
        passwordmsg1.innerHTML = "请输入6-20位数字和字母组合的密码";
       passwordmsg1.style.color='red';
    return false;
    }else {
       passwordmsg1.innerHTML = "密码格式符合要求";
       passwordmsg1.style.color='green';
    }
    if(password2.value.length==0){
        passwordmsg2.innerHTML = "请重复输入密码";
       passwordmsg2.style.color='red';
    return false;
    }else if(password2.value!=password1.value)
    {
     passwordmsg2.innerHTML = "两次密码输入不一致";
     passwordmsg2.style.color='red';
     return false;
    }else{
     passwordmsg2.innerHTML = "两次密码输入一致";
     passwordmsg2.style.color='green';
     return ture;
    }
  }
  function checkver(){
    var ver= document.getElementById('yanzhengma');
   var vermsg= document.getElementById('vermsg');
   if(ver.value.length==0){
          vermsg.innerHTML = "验证码不得为空";
         vermsg.style.color='red';
         return false;
      }
   else if(ver.value.length!=6){
        vermsg.innerHTML = "验证码必须为6位";
       vermsg.style.color='red';
    return false;
    }else {
        vermsg.innerHTML = "验证码格式符合要求";
        vermsg.style.color='green';
     return true;
     }
  }

  function confirmDialog(){  
            alert('验证码错误！请重新输入')
            }  
</script>

<script>
  var code = '';
  //function rePswBtnPressed(){
    const repswBtn=document.getElementById("repasswordBtn");
    const vcodeBtn=document.getElementById("vcodeBtn");
        // 绑定事件
    repswBtn.addEventListener("mousedown",function(){
        // 创建对象
        const username=document.getElementById("shouji").value;
        const yanzhengma=document.getElementById("yanzhengma").value;
        const password=document.getElementById("shezhipsw").value;
        const password2=document.getElementById("querenpsw").value;
        console.log(username)
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST','http://localhost/lostpsw');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send('username=' + username + '&verify=' + yanzhengma + '&password=' + password + '&password2=' + password2 +'&code='+ code);
 
      
  
        xhr.onreadystatechange=function(){
            // 判断
            if(xhr.readyState===4){
                if(xhr.status>= 200 && xhr.status<=300){
                    // 处理服务端返回的结果
                    console.log("收到返回结果")
                    console.log(xhr.response);
                    if(xhr.responseText.indexOf(true)+1)
                    {
                      window.location.href='./login.html'
                    }
                    else{
                      confirmDialog()
                    }
                }
            }
        }
    })
    vcodeBtn.addEventListener("mousedown",function(){
      const username=document.getElementById("shouji").value;
      const xhr=new XMLHttpRequest();
        xhr.open('POST','http://106.ihuyi.com/webservice/sms.php?method=Submit');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send('account=C66317888&password=8831f7305a7fa9f38d194395d751457f&mobile=' 
            + username + '&content=您的验证码是：' + getCode(6) + '。请不要把验证码泄露给其他人。');
        xhr.onreadystatechange=function(){
            // 判断
            if(xhr.readyState===4){
                if(xhr.status>= 200 && xhr.status<=300){
                    // 处理服务端返回的结果
                    console.log('输出xhr.response');
                    console.log(xhr.response);
                }
            }
        }
    })

    function getCode(num){
      var arrays=[
        '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'
      ];
      //在大小写字母和数字中任意选出随机组合当作验证码
      for (var i = 0; i < num; i++) {
        //随机获取一个数组的下标
        var r = parseInt(Math.random() * arrays.length);
        code += arrays[r];
      }
      return code
    }
    function login()
  {
    window.location.href='./login.html'
  }
  function register()
  {
    window.location.href='./register.html'
  }
  function yfpage(){
    window.location.href='./ufpage.html'
  } 
  function register()
  {
    window.location.href='./register.html'
  }
  //}
</script>
</body>
</html>